<template>
  <div class="sign-in-subscribe-user">
    <c-title text="有效用户"></c-title>
    <ul class="box">
      <li class="box-item" v-for="item in list" :key="item.id" @click="link(item)">
        <div>
          <p class="title">{{item.activity_name}}</p>
          <p class="c-696969" style="margin-bottom: 0.6875rem;">开始时间：{{item.start_date}}</p>
          <p class="c-696969">结束时间：{{item.end_date}}</p>
        </div>
        <div>
          <p class="count">{{item.valid_user_total}}</p>
          <p class="c-666">当期有效用户</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { scrollMixin } from '../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      isLoadMore: true,
      current_page: 1,
      last_page: 0,
    };
  },
  activated() {
    this.initData()
    this.getData()
  },
  methods: {
    link(data) {
      this.$router.push(this.fun.getUrl("sign_in_subscribe_user_detail", { id: data.id }))
    },
    initData() {
      this.list = [];
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
    },
   async  getData() {
      let { data, result, msg } = await $http.get("plugin.sign-buy.frontend.valid-user.index");
      if (result == 0) {
        return this.$toast(msg)
      }
      this.current_page = data.current_page;
      this.last_page = data.last_page;
      this.list = data.data;
    },
    async getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let { data, result, msg } = await $http.get("plugin.sign-buy.frontend.valid-user.index",{page});
      this.isLoadMore = true;
      if (result == 0) {
        return this.$toast(msg)
      }
      this.current_page = data.current_page;
      this.last_page = data.last_page;
      this.list = this.list.concat(data.data);
    }
  }
};
</script>

<style scoped lang="scss">
.sign-in-subscribe-user {
  padding: 0.75rem 0.5rem;

  .flex {
    display: flex;
  }

  .count {
    color: #f14e4e;
    text-align: right;
    margin-bottom: 0.8rem;
  }

  .c-666 {
    color: #666;
  }

  .c-696969 {
    color: #696969;
  }

  .title {
    font-size: 0.8125rem;
    text-align: left;
    margin-bottom: 0.7813rem;
    font-weight: 400;
    color: #2b2b2b;
  }

  .box {
    display: flex;
    flex-direction: column;
  }

  .left {
    text-align: left;
  }

  .box-item {
    padding: 0.6rem 0.7rem;
    background: #fff;
    font-size: 0.75rem;
    border-radius: 0.6em;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.625rem;
  }
}
</style>
